<template>
  <div>
    <myheader>

    </myheader>
    <!--面包屑导航-->
    <Breadcrumb :datas="datas">

    </Breadcrumb>
    <section class="featured-block text-center center ">
      <div class="container">
        <table>
          <tr>
            <td style="cursor:pointer;" colspan="2">
              <Avatar :src="src" :width="150" fit="fill" class="headImg" align="center"></Avatar>
            </td>
          </tr>
          <tr>
            <th>Password:</th>
            <td style="cursor:pointer;"><input type="text" v-model="password"></td>
            <td rowspan="6" v-show="show">
              <video id="video" :src="videourl" @click="pic" width="300" height="180" controls="controls" autoplay muted>
              </video>
              <br />
              <Button color="blue" @click="pic">{{ mybutton }}</Button>
            </td>
          </tr>
          <tr>
            <th>confirm password :</th>
            <td style="cursor:pointer;"><input type="text" v-model="password1"></td>
          </tr>
          <tr>
            <th>头像上传:</th>
            <td style="cursor:pointer;"><input type="file" @change="upload"></td>
          </tr>
          <tr>
            <th>七牛云头像上传:</th>
            <td style="cursor:pointer;"><input type="file" @change="upload_qiniu"></td>
          </tr>
          <tr>
            <th>七牛云视频上传:</th>
            <td style="cursor:pointer;"><input type="file" @change="upload_qiniu_video"></td>
          </tr>
          <tr v-show="loadpercent_int">
            <th>视频上传进度:</th>
            <td>
              <Progress :percent="loadpercent_int" color="blue">
                <span slot="title"> </span>
                <span slot="text">{{loadpercent_int}}%</span>
              </Progress>
            </td>
          </tr>
          <tr>
            <td style="cursor:pointer;" colspan="2">
              <Button @click="Upd">修改</Button>&nbsp;&nbsp;<Button color="blue" @click="reset">重置</Button>
            </td>
          </tr>
        </table>
        <br />
        <Checkbox :datas='goods' v-model='good_value'></Checkbox>
        <br />
        <Button color='green' @click="flow">确定</Button>
      </div>
    </section>
    <mytail>

    </mytail>
  </div>
</template>

<script>
  // 导包
  import myheader from './myheader.vue'
  import mytail from "./mytail";
  import dragVerify from 'vue-drag-verify'
  import {
    config
  } from "../config.js";

  export default {
    name: "register",
    data() {
      return {
        datas: [{
            'title': '首页',
            route: {
              name: 'index'
            },
          },
          {
            'title': '注册页面',
            route: {
              name: 'register'
            }
          },
          {
            'title': '我的首页'
          }
        ],
        password: '',
        password1: '',
        src: '',
        show: 0,
        // 视频链接
        videourl: '',
        // 七牛云上传凭证
        uptoken: '',
        // 视频上传进度
        loadpercent: '',
        loadpercent_int: 0,
        // 切换按钮变量
        mybutton: '进入画中画',
        // 商品关注列表
        goods: [],
        good_value: [],
        myid: {},
      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'mytail': mytail,
    },
    mounted() {
      this.get_qiniu();
      this.get_userinfo();
      this.get_goods();
    },
    methods: {
      // 批量删除操作
      flow:function(){
        // 判断删除的数量是否小于2个
        if (this.goods.length - this.good_value.length <=2 ){
          var delgoods = []
          for (let i=0, l=this.goods.length; i<l ; i++){
            var index = this.good_value.indexOf(this.goods[i])
            if (index == -1){
              // console.log(this.goods[i])
              delgoods.push(this.myid[this.goods[i]])
            }
          }
          var glist = JSON.stringify(delgoods)
          this.axios.get('http://localhost:8000/adduserflow/',{
            params:{
              uid : localStorage.getItem('uid'),
              ids : glist,
              type : 3
              }
              }).then(result =>{
          this.$Message(result.data.message)
          })
          return false
        }
        // 批量删除数量大于2的
        var goods =[]
        for (let i=0,l=this.good_value.length;i<l;i++){
            goods.push(this.myid[this.good_value[i]])
        }
        var glist = JSON.stringify(goods)
        this.axios.get('http://localhost:8000/adduserflow/',{
          params:{
            uid : localStorage.getItem('uid'),
            ids : glist,
            type : 2
          }
        }).then(result =>{
          // console.log(result.data)
          this.$Message(result.data.message)
        })
      },
      // 获取商品方法
      get_goods:function(){
        this.axios.get('http://localhost:8000/uidflow/', {
          params:{
            uid: localStorage.getItem('uid')
          }
        }).then( result => {
          // console.log(result.data)
          var goods =[];
          for (let i=0, l=result.data.length;i<l;i++){
            goods.push(result.data[i].name);
            this.myid[result.data[i].name] = result.data[i].id;
          }
          this.goods = goods
          this.good_value = goods
        })
      },
      // 定义画中画切换
      pic: function () {
        // 判断是否进入画中画
        if (video !== document.pictureInPictureElement) {
          // 进入画中画
          video.requestPictureInPicture();
          this.mybutton = '退出画中画'
        } else {
          // 退出画中画
          document.exitPictureInPicture();
          this.mybutton = '进入画中画'
        }
      },
      // 用户信息获取
      get_userinfo: function () {
        this.axios.get('http://127.0.0.1:8000/userinfo/', {
          params: {
            'uid': localStorage.getItem('uid'),
            'jwt': localStorage.getItem('jwt')
          }
        }).then(res => {
          var img = res.data.img;
          var image = res.data.image;
          if (img.startsWith(localStorage.getItem('username'))) {
            this.src = config['upload_img'] + img
          } else {
            this.src = config['qiniu'] + img
          }
          if (image != null) {
            this.videourl = config['qiniu'] + image;
            this.show = 1
          }
        })
      },
      // 暂停播放
      // suspend() {
      //   var vide = document.getElementById("vide");
      //   if (vide.paused) {
      //     vide.play();
      //   } else if (vide.play()) {
      //     vide.pause();
      //   }
      // },
      // 七牛云凭证
      get_qiniu: function () {
        this.axios.get('http://127.0.0.1:8000/qiniu/').then(res => {
          this.uptoken = res.data.token
        })
      },
      // 七牛云视频
      upload_qiniu_video: function (e) {
        let file = e.target.files[0];
        let data = new FormData();
        data.append('token', this.uptoken);
        data.append('file', file);
        const axios_qiniu = this.axios.create({
          withCredentials: false
        });
        // 发送请求
        axios_qiniu({
          method: 'POST',
          url: 'http://up-z1.qiniu.com/',
          data: data,
          timeout: 30000,
          //上传进度
          onUploadProgress: (e) => {
            //设置总进度对象 原理是已上传字节数/总字节数
            var comlete = (e.loaded / e.total);
            // 安慰剂按钮
            if (comlete < 1) {
              this.loadpercent = (comlete * 100).toFixed(2) + '%'
              this.loadpercent_int = parseInt((comlete * 100).toFixed(2))
            }
          }
        }).then(res => {
          // console.log(res);
          this.videourl = config['qiniu'] + res.data.key;
          this.show = 1;
          this.loadpercent = '100%';
          this.loadpercent_int = 100;
          this.axios.get('http://localhost:8000/addimage/', {
            params: {
              uid: localStorage.getItem('uid'),
              image: res.data.key
            }
          }).then(res => {
            console.log(res.data.data)
          })
        })
      },
      // 七牛云上传
      upload_qiniu: function (e) {
        let file = e.target.files[0]; // 获取文件对象
        let data = new FormData(); // 声明参数
        data.append('token', this.uptoken); //将上传凭证添加参数
        data.append('file', file); // 添加文件
        const axios_qiniu = this.axios.create({
          withCredentials: false
        }); // 定制化一个axios
        // 发送请求
        axios_qiniu({
          method: 'POST',
          url: 'http://up-z1.qiniu.com/', //华北区的节点
          data: data,
          timeout: 30000,
        }).then(res => {
          // console.log(res);
          this.src = config['qiniu'] + res.data.key;
          let data = new FormData();
          data.append('qiniu_name', res.data.key);
          data.append('qiniu', 1);
          data.append('uid', localStorage.getItem('uid'));
          this.axios.post(config['upload'], data).then(res => {
            console.log(res.data.data)
          })
        })
      },
      // 提交图片
      upload: function (e) {
        // 获取文件对象
        let file = e.target.files[0];
        // 声明参数
        let params = new FormData();
        // 添加文件
        params.append('file', file, file.name);
        params.append('uid', localStorage.getItem('uid'));
        // 声明请求头
        // let config = {headers: {'Content-Type': 'multipart/form-data'}};
        // 发送请求
        this.axios.post(config['upload'], params).then(res => {
          console.log(res);
          // 赋值操作
          this.src = config['upload_img'] + res.data.filename
        })
      },
      // 注册
      Upd() {
        if (this.password === '') {
          return this.$Message('密码不能为为空')
        }
        if (this.password1 === '') {
          return this.$Message('密码不能为为空')
        }
        if (this.password !== this.password1) {
          return this.$Message('两次密码不一致')
        }
        this.axios.get(config['upd'], {
          params: {
            uid: localStorage.getItem('uid'),
            password: this.password,
          }
        }).then(res => {
          if (res.data.code === 200) {
            this.$Message(res.data.data);
            this.$router.push('/')
          } else {
            this.$Message(res.data.data)
          }
        })
      },
      // 重置
      reset() {
        this.password = '';
        this.password1 = '';
      }
    }
  }

</script>
<style scoped>
  .headImg {
    width: auto;
    margin: 0px auto;
  }

</style>
